Code Playground

@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,600,700,800);
*,
:after,
:before {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
* {
  box-sizing: border-box;
}

body {
  --width: 1vmin;
  --offset: 50%;
  --rot: 0deg;
  min-height: 100vh;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  animation:
    rotate 41s cubic-bezier(0.87, 0, 0.13, 1) infinite,
    offset 37s cubic-bezier(0.87, 0, 0.13, 1) infinite,
    width  31s cubic-bezier(0.87, 0, 0.13, 1) infinite;
}

.the-waffle {
  height: 80vmin;
  width: 80vmin;
  background-color: black;
  transform: rotate(calc(var(--rot) * -1));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-size: calc(var(--offset) * .5) calc(var(--offset) * .5);
  background-position: center;
  background-image:
    linear-gradient(
      calc(var(--rot) + (15deg *  0)),
      transparent calc(var(--offset) - var(--width) - 1px),
      hsl(calc(var(--rot) + (15deg *  0)), 100%, 50%)
        calc(var(--offset) - var(--width))
        calc(var(--offset) + var(--width)),
      transparent calc(var(--offset) + var(--width) + 1px)
    ),
    linear-gradient(
      calc(var(--rot) + (15deg *  1)),
      transparent calc(var(--offset) - var(--width) - 1px),
      hsl(calc(var(--rot) + (15deg *  1)), 100%, 50%)
        calc(var(--offset) - var(--width))
        calc(var(--offset) + var(--width)),
      transparent calc(var(--offset) + var(--width) + 1px)
    ),
    linear-gradient(
      calc(var(--rot) + (15deg *  2)),
      transparent calc(var(--offset) - var(--width) - 1px),
      hsl(calc(var(--rot) + (15deg *  2)), 100%, 50%)
        calc(var(--offset) - var(--width))
        calc(var(--offset) + var(--width)),
      transparent calc(var(--offset) + var(--width) + 1px)
    ),
    linear-gradient(
      calc(var(--rot) + (15deg *  3)),
      transparent calc(var(--offset) - var(--width) - 1px),
      hsl(calc(var(--rot) + (15deg *  3)), 100%, 50%)
        calc(var(--offset) - var(--width))
        calc(var(--offset) + var(--width)),
      transparent calc(var(--offset) + var(--width) + 1px)
    ),
    linear-gradient(
      calc(var(--rot) + (15deg *  4)),
      transparent calc(var(--offset) - var(--width) - 1px),
      hsl(calc(var(--rot) + (15deg *  4)), 100%, 50%)
        calc(var(--offset) - var(--width))
        calc(var(--offset) + var(--width)),
      transparent calc(var(--offset) + var(--width) + 1px)
    ),
    linear-gradient(
      calc(var(--rot) + (15deg *  5)),
      transparent calc(var(--offset) - var(--width) - 1px),
      hsl(calc(var(--rot) + (15deg *  5)), 100%, 50%)
        calc(var(--offset) - var(--width))
        calc(var(--offset) + var(--width)),
      transparent calc(var(--offset) + var(--width) + 1px)
    ),
    linear-gradient(
      calc(var(--rot) + (15deg *  6)),
      transparent calc(var(--offset) - var(--width) - 1px),
      hsl(calc(var(--rot) + (15deg *  6)), 100%, 50%)
        calc(var(--offset) - var(--width))
        calc(var(--offset) + var(--width)),
      transparent calc(var(--offset) + var(--width) + 1px)
    ),
    linear-gradient(
      calc(var(--rot) + (15deg *  7)),
      transparent calc(var(--offset) - var(--width) - 1px),
      hsl(calc(var(--rot) + (15deg *  7)), 100%, 50%)
        calc(var(--offset) - var(--width))
        calc(var(--offset) + var(--width)),
      transparent calc(var(--offset) + var(--width) + 1px)
    ),
    linear-gradient(
      calc(var(--rot) + (15deg *  8)),
      transparent calc(var(--offset) - var(--width) - 1px),
      hsl(calc(var(--rot) + (15deg *  8)), 100%, 50%)
        calc(var(--offset) - var(--width))
        calc(var(--offset) + var(--width)),
      transparent calc(var(--offset) + var(--width) + 1px)
    ),
    linear-gradient(
      calc(var(--rot) + (15deg *  9)),
      transparent calc(var(--offset) - var(--width) - 1px),
      hsl(calc(var(--rot) + (15deg *  9)), 100%, 50%)
        calc(var(--offset) - var(--width))
        calc(var(--offset) + var(--width)),
      transparent calc(var(--offset) + var(--width) + 1px)
    ),
    linear-gradient(
      calc(var(--rot) + (15deg * 10)),
      transparent calc(var(--offset) - var(--width) - 1px),
      hsl(calc(var(--rot) + (15deg * 10)), 100%, 50%)
        calc(var(--offset) - var(--width))
        calc(var(--offset) + var(--width)),
      transparent calc(var(--offset) + var(--width) + 1px)
    ),
    linear-gradient(
      calc(var(--rot) + (15deg * 11)),
      transparent calc(var(--offset) - var(--width) - 1px),
      hsl(calc(var(--rot) + (15deg * 11)), 100%, 50%)
        calc(var(--offset) - var(--width))
        calc(var(--offset) + var(--width)),
      transparent calc(var(--offset) + var(--width) + 1px)
    ),
    linear-gradient(
      calc(var(--rot) + (15deg * 12)),
      transparent calc(var(--offset) - var(--width) - 1px),
      hsl(calc(var(--rot) + (15deg * 12)), 100%, 50%)
        calc(var(--offset) - var(--width))
        calc(var(--offset) + var(--width)),
      transparent calc(var(--offset) + var(--width) + 1px)
    ),
    linear-gradient(
      calc(var(--rot) + (15deg * 13)),
      transparent calc(var(--offset) - var(--width) - 1px),
      hsl(calc(var(--rot) + (15deg * 13)), 100%, 50%)
        calc(var(--offset) - var(--width))
        calc(var(--offset) + var(--width)),
      transparent calc(var(--offset) + var(--width) + 1px)
    ),
    linear-gradient(
      calc(var(--rot) + (15deg * 14)),
      transparent calc(var(--offset) - var(--width) - 1px),
      hsl(calc(var(--rot) + (15deg * 14)), 100%, 50%)
        calc(var(--offset) - var(--width))
        calc(var(--offset) + var(--width)),
      transparent calc(var(--offset) + var(--width) + 1px)
    ),
    linear-gradient(
      calc(var(--rot) + (15deg * 15)),
      transparent calc(var(--offset) - var(--width) - 1px),
      hsl(calc(var(--rot) + (15deg * 15)), 100%, 50%)
        calc(var(--offset) - var(--width))
        calc(var(--offset) + var(--width)),
      transparent calc(var(--offset) + var(--width) + 1px)
    ),
    linear-gradient(
      calc(var(--rot) + (15deg * 16)),
      transparent calc(var(--offset) - var(--width) - 1px),
      hsl(calc(var(--rot) + (15deg * 16)), 100%, 50%)
        calc(var(--offset) - var(--width))
        calc(var(--offset) + var(--width)),
      transparent calc(var(--offset) + var(--width) + 1px)
    ),
    linear-gradient(
      calc(var(--rot) + (15deg * 17)),
      transparent calc(var(--offset) - var(--width) - 1px),
      hsl(calc(var(--rot) + (15deg * 17)), 100%, 50%)
        calc(var(--offset) - var(--width))
        calc(var(--offset) + var(--width)),
      transparent calc(var(--offset) + var(--width) + 1px)
    ),
    linear-gradient(
      calc(var(--rot) + (15deg * 18)),
      transparent calc(var(--offset) - var(--width) - 1px),
      hsl(calc(var(--rot) + (15deg * 18)), 100%, 50%)
        calc(var(--offset) - var(--width))
        calc(var(--offset) + var(--width)),
      transparent calc(var(--offset) + var(--width) + 1px)
    ),
    linear-gradient(
      calc(var(--rot) + (15deg * 19)),
      transparent calc(var(--offset) - var(--width) - 1px),
      hsl(calc(var(--rot) + (15deg * 19)), 100%, 50%)
        calc(var(--offset) - var(--width))
        calc(var(--offset) + var(--width)),
      transparent calc(var(--offset) + var(--width) + 1px)
    ),
    linear-gradient(
      calc(var(--rot) + (15deg * 20)),
      transparent calc(var(--offset) - var(--width) - 1px),
      hsl(calc(var(--rot) + (15deg * 20)), 100%, 50%)
        calc(var(--offset) - var(--width))
        calc(var(--offset) + var(--width)),
      transparent calc(var(--offset) + var(--width) + 1px)
    ),
    linear-gradient(
      calc(var(--rot) + (15deg * 21)),
      transparent calc(var(--offset) - var(--width) - 1px),
      hsl(calc(var(--rot) + (15deg * 21)), 100%, 50%)
        calc(var(--offset) - var(--width))
        calc(var(--offset) + var(--width)),
      transparent calc(var(--offset) + var(--width) + 1px)
    ),
    linear-gradient(
      calc(var(--rot) + (15deg * 22)),
      transparent calc(var(--offset) - var(--width) - 1px),
      hsl(calc(var(--rot) + (15deg * 22)), 100%, 50%)
        calc(var(--offset) - var(--width))
        calc(var(--offset) + var(--width)),
      transparent calc(var(--offset) + var(--width) + 1px)
    ),
    linear-gradient(
      calc(var(--rot) + (15deg * 23)),
      transparent calc(var(--offset) - var(--width) - 1px),
      hsl(calc(var(--rot) + (15deg * 23)), 100%, 50%)
        calc(var(--offset) - var(--width))
        calc(var(--offset) + var(--width)),
      transparent calc(var(--offset) + var(--width) + 1px)
    )
}

@keyframes rotate {
  from { --rot: 0deg; }
  to   { --rot: 360deg; }
}

@keyframes offset {
  0%, 50%, 100% { --offset: 50%; }
  25%   { --offset: 20%; }
  75%   { --offset: 80%; }
}

@keyframes width {
  0%, 50%, 100% { --width: .1vmin; }
  25%   { --width: .05vmin; }
  25%   { --width: 1vmin; }
}

@property --rot {
  syntax: "<angle>";
  inherits: true;
  initial-value: 0deg;
}

@property --offset {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 50%;
}

@property --width {
  syntax: "<length>";
  inherits: true;
  initial-value: .1vmin;
}

Frontend Forever App